<template>
  <div>
    <!-- 报告管理 -->
    <el-card class="report_card">
      <el-form :model="searchForm" ref="searchRef" inline>
        <el-form-item label="检查单号" prop="code">
          <el-input
            v-model="searchForm.code"
            placeholder="请输入检查单号"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="customerName">
          <el-input
            v-model="searchForm.customerName"
            placeholder="请输入姓名"
            class="form_input"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="Search"
            @click="getList()"
            class="btn"
          >
            查询
          </el-button>
          <el-button icon="Refresh" @click="handleReset" class="btn">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mt-1">
      <el-table
        :data="tableData"
        style="width: 100%; height: calc(100vh - 15rem)"
      >
        <el-table-column prop="code" label="检查单号" align="center" />
        <el-table-column prop="reportPeopleName" label="姓名" align="center" />
        <el-table-column prop="createdAt" label="创建时间" align="center" />
        <el-table-column label="报告名称" align="center">
          <template #default="{ row }">
            {{ row.projectName ? row.projectName : "综合报告" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              @click="routerViewLocationKey(row.reportPdf)"
              ><el-icon><View /></el-icon>查看</el-button
            >
            <!-- <el-button link>打印</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <PagingQuery
        :page="page"
        :size="size"
        :total="total"
        @getList="getList"
        class="mt-1"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import { handleApiResponse } from "@/utils/request.js";
import { ListReportInfos } from "../../../../wailsjs/go/api/ReportApi.js";

onMounted(() => {
  getList();
});

const searchRef = ref(null);
const searchForm = ref({
  code: "",
  customerName: "",
});
const handleReset = () => {
  searchRef.value.resetFields();
  getList();
};

const tableData = ref([]);
const page = ref(1);
const size = ref(10);
const total = ref(0);
async function getList(e) {
  if (e) {
    page.value = e.page;
    size.value = e.size;
  }
  handleApiResponse(() =>
    ListReportInfos({
      ...searchForm.value,
      page: page.value,
      size: size.value,
    })
  ).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

// 查看
const routerViewLocationKey = (url) => {
  window.open(url, "_blank");
};
</script>

<style scoped lang="scss">
.report_card :deep(.el-form-item) {
  @apply mb-0;
}
</style>